/**
 * 尊敬的用户，你好：页面 JS 面板是高阶用法，一般不建议普通用户使用，如需使用，请确定你具备研发背景，能够自我排查问题。
 * 我们可以用 JS 面板来开发一些定制度高功能，比如：调用API接口，自定义动作执行等等。
 */

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
    debugger
    console.log("「页面 JS」：当前页面地址 " + location.href);
    const self = this;
    setTimeout(()=>{
        // listenWebSocket(self);
    },100)

}


function listenWebSocket(self){
    let btn = self.$$("import_data_4w5hv5");
    if (!btn) return;

    let btnEle = btn.$el;
    btnEle.addEventListener("click", function () {
        const modal = document.querySelector("#u-import-data-modal");

        const observer = new MutationObserver((mutationsList) => {
            for (let mutation of mutationsList) {
                if (mutation.attributeName === "style") {
                    if (modal.style.display !== "none") {
                        console.log("弹窗已打开！");
                    } else {
                        console.log("弹窗已关闭，执行后置操作...");
                        observer.disconnect(); // 监听到关闭后，取消监听
                        doPostAction(); // 调用后置操作
                    }
                }
            }
        });
        observer.observe(modal, { attributes: true });
        console.log("监听弹窗状态变化...");

    });
}

function doPostAction() {
    console.log("弹窗关闭后，执行后续处理...");
    const hiddenData = document.querySelector("#u-import-data-modal")?.dataset;
    const vueComponent = document.querySelector("#u-import-data-modal")?.__vue__;
    const modalData = vueComponent ? vueComponent.yourVueData : null;
}
export function didMount() {}
export function didMount() {}
